<template>
  <Layout :class="'bg-white p-2'">
    <Row :class="'m-1'">
      <Col span="2">
        <Button class="m-2" type="error" @click="newUser" style="width: 70px;"
          >新增</Button
        >
      </Col>
      <Col span="4">
        <Input
          :class="'w-75 m-2'"
          v-model="searchProName"
          placeholder="请输入项目名称"
        />
      </Col>
      <Col span="4">
        <Input
          :class="'w-75 m-2'"
          v-model="searchProLead"
          placeholder="请输入项目负责人"
        />
      </Col>
      <Col span="4">
        <Input
          :class="'w-75 m-2'"
          v-model="searchProAddr"
          placeholder="请输入项目所在地"
        />
      </Col>
      <Col span="4">
        <Button
          class="m-2"
          type="primary"
          shape="circle"
          @click="search"
          icon="ios-search"
          >查询</Button
        >
      </Col>
    </Row>
    <Layout :class="'bg-white'">
      <Table border :class="'m-1'" :columns="columnInfo" :data="proList">
        <template slot-scope="{ row, index }" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="show(row.proId)"
            >详细</Button
          >
          <Button type="error" size="small" @click="remove(row.proId)"
            >删除</Button
          >
        </template>
      </Table>
    </Layout>
  </Layout>
</template>
<script>
export default {
  data() {
    let self = this
    return {
      searchProName: '',
      searchProLead: '',
      searchProAddr: '',
      columnInfo: [
        {
          width: 80,
          fixed: 'left',
          align: 'center',
		  type:'index',
        },
        {
          title: '项目名称',
          key: 'proName',
          fixed: 'left',
          width: 200,
        },
        {
          title: '项目简介',
          key: 'proInfo',
          width: 350,
        },
        {
          title: '项目所在地',
          key: 'proAddr',
          width: 150,
        },
        {
          title: '项目负责人',
          key: 'proLead',
          width: 200,
        },
        {
          title: '负责人电话',
          key: 'leadTel',
          width: 150,
        },
        {
          title: '启动标志',
          key: 'statu',
          width: 150,
        },
        {
          title: '项目时间',
          key: 'datetime',
          width: 200,
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          fixed: 'right',
        },
      ],
      proList: [],
    }
  },
  methods: {
    newUser: function() {
      this.$router.push({
        name: 'program_new',
      })
    },
    show: function(proId) {
      this.$router.push({
        name: 'program_detail',
        params: {
          proId,
        },
      })
    },
    remove: function(proId) {
      this.message.confirm({
        title: '删除提示',
        content: '即将删除项目，确定吗？',
        onOk: () => {
          this.http
            .delete({
              url: `/pro/remove/${proId}`,
            })
            .then((data) => {
              this.search()
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
    search: function() {
      let pro = { proName: this.searchProName }
      this.http
        .get({
          url: '/pro/list',
          param: {
            proName: this.searchProName,
            proLead: this.searchProLead,
            proAddr: this.searchProAddr,
          },
        })
        .then((data) => {
          this.$data.proList = parseDataObj(data)
        })
    },
  },
  created: function() {
    this.search()
  },
}
function parseDataObj(data) {
  var ProArray = []

  data.forEach((list) => {
    let poko = {
      proId: list.id,
      datetime: list.datetime,
      leadTel: list.leadTel,
      proAddr: list.proAddr,
      proInfo: list.proInfo,
      proLead: list.proLead,
      proName: list.proName,
      statu: list.statu,
    }
    ProArray.push(poko)
  })
  return ProArray
}
</script>

<style></style>
